import * as React from 'react';
import * as CSSModules from 'react-css-modules';
import * as styles from './index.css';
import * as moment from 'moment';

interface Props {
    ticket: any;
}

const Coupon = ({ticket}: Props): JSX.Element => (
    <div styleName="container">

        <i styleName="bge" bgimg-center="100"/>

        <div styleName="box">
            <span styleName="price">
                ￥{ticket && ticket.price ? ticket.price / 100 : 0}
            </span>
        </div>
        <div styleName="box">
            <span styleName="name">满{ticket && ticket.condition ? ticket.condition / 100 : 0}可用</span>
            <span styleName="time">
                <i>有效期至：{ticket && ticket.create_date
                        ? moment(ticket.create_date).format('YYYY-MM-DD')
                        : moment(new Date()).format('YYYY-MM-DD')}</i>
            </span>
        </div>
    </div>
);

const CouponHoc = CSSModules(Coupon, styles);

export default CouponHoc;